<template>
  <div >
    <div class='app-container'>
      <el-form ref="form" label-width="120px" inline :model="form" class='type'>
  <el-form-item label="商品类型搜索：" >
    <el-input v-model="form.className" palceholder='请输入'></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"><i class="el-icon-search" @click='search'></i>查询</el-button>
  </el-form-item>
  </el-form>
    </div>
  <div class='app-container'>
   <el-card shadow="always">
      <el-button type="primary" class='config1' icon="el-icon-plus" @click='add'> 新建</el-button>
    </el-card>
    <el-table style="width: 100%" :data='list'>
      <el-table-column
        label="序号"
        type='index'
        width='100'
        >
      </el-table-column>
      <el-table-column
      width='900'
        prop="className"
        label="商品类型名称"
        >
      </el-table-column>
       <el-table-column
        label="操作" >
        <template #default='{row}'>
        <el-button type="text" @click='edit(row)'>修改</el-button>
        <el-button type="text" class='del' @click='del(row.classId)'>删除</el-button>
        </template>
      </el-table-column>
      
    </el-table>
      <div class="page">
        <div class="left">
          <span>共{{params.totalCount}}条记录</span>
          <span>第 {{params.pageIndex}}/{{params.totalPage}}页</span>
        </div>
        <div class="right">
          <el-button-group>
      <el-button type="primary" 
      @click=producttypeList(-1) :disabled='params.pageIndex<=1?true:false'>上一页</el-button>
      <el-button type="primary" @click=producttypeList(1)>下一页</el-button>
      </el-button-group>
        </div>
      </div>
    </div>

    
 <Add  ref='add' :row='row'></Add>
  </div>
</template>
<script>

import Add from './components/add.vue'
import {producttypeList,deltype,searchtype} from '@/api/commodity'
export default {
    name: 'eqweq',
    components:{
      Add
    },
    data() {
        return {
            form:{
              className:''
            },
            list:[],
            row:{},
          params:{
          pageIndex: 0,
          pageSize: 10,
          totalCount:0,
          totalPage:0,
          isRepair: false
        },
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
.top{
  margin-bottom: 15px;
}
.el-button{
  margin-bottom: 15px;
}
.type{
  // padding: 15px;
  color:#606266;
  font-size: 14px;
}

.el-form{
  // width: 1159px;
  height: 64px;
  padding-top: 14px;
  background-color: #fff;
  border:none
}
.el-icon-search{
  margin-right: 7px;
}
.config1{
  background-color: #ff893b;
  color:#fff;
  border:none;
  cursor: pointer;
}
.del{
    color:#ff5a5a
}
::v-deep .el-table td, .el-table th.is-leaf{
 border-bottom:none
}
::v-deep .el-table-column{
  height: 42px;
}
.page{
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-right: 5px;
    }
  }
  .right{
    margin-left: 750px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }
    
  }
}
</style>
